<!--
- Author:  LiShibin.
- Date:    2018/8/21.
- File:    nextSum.
-->
<template>
  <div class="Web_Box">
    <div class="integrat2 f-cb">
      <!--<span v-show="type== '2'">当前 {{memberInfo.freeze_balance}}</span>-->
      <!--<span v-show="type == '3'">当前 {{memberInfo.stock}}</span>-->
      <!--<router-link :to="{name: 'member-spread'}" class="more">推荐用户购买</router-link>-->
    </div>
    <div class="inter_tab"><a>
      <table width="100%" border="0">
        <!--<tr>-->
          <!--<td colspan="2" width="100%">下级现金销售总额：{{data.order_amount}}</td>-->
          <!--&lt;!&ndash;<td width="50%">状态：{{history.state | integralStatusTxt}}</td>&ndash;&gt;-->
        <!--</tr>-->
        <!--<tr>-->
          <!--<td colspan="2" width="100%">下级云宝总额：{{data.order_h_amount}}</td>-->
        <!--</tr>-->
        <!--<tr>-->
          <!--<td colspan="2" width="100%">下级云通证总额：{{data.order_hg_amount}}</td>-->
        <!--</tr>-->
        <tr>
            <div class="suborbox f-cb" style="background:#fff; border-bottom:1px #eee solid ; font-size:15px; padding:0 10px; color:#333; line-height:50px; margin-bottom:0px;">
              <div class="screenbox" style="width: 50%;float:left; text-align:left; line-height:50px;"><a style="padding-left:5px;"><span style="">起始时间：</span><i class="iconfont icon-shijian" @click="openDatePicker"></i><span style="margin-left: 5px">{{startDate}}</span></a></div>
              <div class="screenbox" style="width: 50%;float:left; text-align:left; line-height:50px;"><a style="padding-left:5px;"><span style="">截止时间：</span><i class="iconfont icon-shijian" @click="openDatePicker1"></i><span style="margin-left: 5px">{{endDate}}</span></a></div>
            </div>
        </tr>
        <tr>
          <td colspan="2" width="100%">自己+下级现金下单总金额：{{order_amount.pay_amount}}</td>
        </tr>
        <tr>
          <td colspan="2" width="100%">自己+下级云宝下单金额：{{order_amount.hm_amount}}</td>
        </tr>
        <tr>
          <td colspan="2" width="100%">自己+下级云通证下单金额：{{order_amount.hg_amount}}</td>
        </tr>
        <tr>
          <td colspan="2" width="100%">自己+下级云券下单金额：{{order_amount.hq_amount}}</td>
        </tr>
        <tr>
          <td colspan="2" width="100%">总计：{{order_amount.pay_amount + order_amount.hm_amount + order_amount.hg_amount + order_amount.hq_amount| toFixed(2)}}</td>
        </tr>
      </table>
    </a>
    </div>
    <back-nav></back-nav>
    <footer-tab></footer-tab>
    <mt-datetime-picker
      ref="datePicker"
      v-model="currentDate"
      type="date"
      year-format="{value} 年"
      month-format="{value} 月"
      date-format="{value} 日"
      @confirm="handleDateChange">
    </mt-datetime-picker>
    <mt-datetime-picker
      ref="datePicker1"
      v-model="currentDate1"
      type="date"
      year-format="{value} 年"
      month-format="{value} 月"
      date-format="{value} 日"
      @confirm="handleDateChange1">
    </mt-datetime-picker>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        data: [],
        currentDate: new Date(),
        currentDate1: new Date(),
        startDate: new Date().getFullYear() + '-' + (new Date().getMonth()) + '-' + (new Date().getDate()),
        endDate: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + (new Date().getDate()),
        order_amount: ''
      }
    },
    created() {
      this.GetLowerLevelOrderAmount()
      this.GetLowerLevelOrderAmountByTime(this.startDate, this.endDate)
      console.log(this.startDate)
    },
    components: {
    },
    methods: {
      GetLowerLevelOrderAmount() {
        this.$request.GetLowerLevelOrderAmount().then(data => {
          this.data = data
        }).catch(e => {
          this.$toast('获取下级总额失败:' + e.msg)
        })
      },
      openDatePicker() {
        this.$refs.datePicker.open()
      },
      openDatePicker1() {
        this.$refs.datePicker1.open()
      },
      handleDateChange(value) {
        let date = new Date(value)
        let dateStr = this.$utils.formatDate(date, 'yyyy-MM-dd')
        // if (dateStr == 'NaN-aN-aN') {
        //   this.selectMonth = new Date().getFullYear() + '-0' + (new Date().getMonth() + 1) + '-01'
        // } else {
        //   this.selectMonth = dateStr
        // }
        this.startDate = dateStr
        console.log(dateStr)
        this.GetLowerLevelOrderAmountByTime(this.startDate, this.endDate)
        // this.initBalanceHistory()
      },
      handleDateChange1(value) {
        let date = new Date(value)
        let dateStr = this.$utils.formatDate(date, 'yyyy-MM-dd')
        // if (dateStr == 'NaN-aN-aN') {
        //   this.selectMonth = new Date().getFullYear() + '-0' + (new Date().getMonth() + 1) + '-01'
        // } else {
        //   this.selectMonth = dateStr
        // }
        console.log(dateStr)
        this.endDate = dateStr
        this.GetLowerLevelOrderAmountByTime(this.startDate, this.endDate)
        // this.initBalanceHistory()
      },
      loadMore() {
        if (this.historyList.loading || this.historyList.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getIntegralHistory(++this.historyList.page, this.historyList.pageSize)
        }, 500)
      },
      GetLowerLevelOrderAmountByTime(startDate, endDate) {
        this.$request.GetLowerLevelOrderAmountByTime(startDate, endDate).then(data => {
          this.order_amount = data
        }).catch(e => {
          this.$toast('获取金额失败:' + e.msg)
        })
      }
    }
  }
</script>

<style>

</style>
